<template>
  <view>
    <unitv-page id="playPage" :show="true" ref="playPage" class="page_box">
      <view class="movie-contain">
        <unitv-video
          id="player"
          class="player"
          :src="playVideoUrl"
          :autoplay="true"
          @ended="endedFun"
          :isSHowLoading="isSHowLoading"
          :pauseImg="coverInfo.image_url"
          :failStatus="failStatus"
        >
        </unitv-video>
        <view class="movie-inter">
          <view class="movie-title">{{ videoDetail.name }}</view>
          <view class="label_box">{{ videoDetail.actor }} </view>
          <view class="label_box"
            >{{ videoDetail.area }}{{ videoDetail.year }}
          </view>
          <view class="label_box">{{ videoDetail.type }} </view>
          <view class="label_box" v-html="videoDetail.content"> </view>
          <view class="movie-content" v-if="videoDetail.continu">
            {{ videoDetail.continu }}
          </view>
          <view>
            <unitv-zone
              id="btn-zone"
              :autoFous="true"
              :column="2"
              down="list-zone"
              :item="0"
              :values="[0, 1]"
              class="btn-zone"
            >
              <unitv-item
                :item="0"
                class="fullscreen-btn"
                @click="switchFullScreen"
                hoverClass="btn-hover"
              >
                <view class="btn btn_play">全屏播放</view>
              </unitv-item>
              <unitv-item
                :item="1"
                class="favicon-btn"
                hoverClass="btn-hover"
                @click="playErrorFun"
              >
                <view class="btn btn_swtich">不能播放</view>
              </unitv-item>
            </unitv-zone>
          </view>
        </view>
      </view>
      <unitv-zone
        id="list-zone"
        class="list-zone"
        up="btn-zone"
        :values="video_ids"
        :column="video_ids.length"
        v-if="video_ids.length > 1"
      >
        <view class="jj_title"> 剧集与更新 </view>
        <unitv-scroll @scroll="scrollFun">
          <unitv-item
            v-for="(item, index) in video_ids"
            :item="index"
            :key="index"
            :class="playIndex === index ? 'play_select' : 'list'"
            hoverClass="list-hover"
            @click="openVideo(index)"
          >
            <image
              src="../../static/play.png"
              mode="aspectFit"
              v-if="playIndex === index"
            ></image>
            <text v-else>{{ index | add }}</text>
          </unitv-item>
        </unitv-scroll>
      </unitv-zone>
    </unitv-page>
  </view>
</template>

<script>
import { getVideoDetail, getVideoList, getVideoPlay } from "@/api/index.js";
import commonUtil from "@/store/commonUtil.js";
export default {
  data() {
    return {
      status: 0,
      category_map: [],
      coverInfo: {},
      isSHowLoading: true,
      htmlPath: "https://v.qq.com/x/cover/",
      cid: "",
      playVideoUrl: "",
      failStatus: 0,
      page_context: "",
      source: "", //来自那个平台
      htmlUrl: "",
      id: "", // 视频id
      part: "", // 第几集
      videoDetail: {
        parts: [],
      },
      playIndex: 0,
      video_ids: [],
    };
  },
  onLoad(params) {
    let that = this;
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("playerPageData", function (data) {
      console.log("跳转详情-after", data);
      let param = data.data;
      that.id = param.id;
      that.getDetail();
    });
  },
  onReady() {
    this.viderContext = uni.createVideoContext("player");
  },
  filters: {
    getStringLen(text, length = 80) {
      if (text.length <= length) {
        return text;
      } else {
        return text.substr(0, length) + "...";
      }
    },
    add(text) {
      return text++;
    },
  },
  //   watch: {
  //     playVideoUrl(val) {
  //       console.log(val);
  //     },
  //   },
  methods: {
    // 获取视频详情
    async getDetail() {
      let res = await getVideoDetail({ id: this.id });
      console.log(res.data, "detail");
      this.videoDetail = res.data;
      this.part = res.data.parts[0].part[0];
      this.isSHowLoading = false;
      this.failStatus = 0;
      this.video_ids = res.data.parts[0].part;
      this.getPlayUrlFun();
    },

    getDetailOld() {
      this.failStatus = 0;
      getVideoDetail({
        cid: this.cid,
        vid: this.vid,
      })
        .then((res) => {
          this.isSHowLoading = false;
          if (res.code === 200) {
            this.coverInfo = res.data;
          } else {
            this.failStatus = 2;
          }
        })
        .catch((res) => {
          this.isSHowLoading = false;
          this.failStatus = 2;
        });
    },
    getVideoList() {
      getVideoList({
        cid: this.cid,
        page_context: this.page_context,
      }).then((res) => {
        if (res.code == 200) {
          let list = res.data.list;
          list.forEach((item) => {
            this.video_ids.push({
              ...item,
              playUrl: this.htmlPath + this.cid + "/" + item.vid + ".html",
            });
          });
          this.title = this.video_ids[0].play_title;
          this.htmlUrl = this.video_ids[0].playUrl;
          this.page_context = res.data.page_context;
          this.getPlayUrlFun();
        }
      });
    },
    switchFullScreen() {
      this.viderContext.requestFullScreen();
    },
    scrollFun(data) {
      if (data.left - data.oldLeft >= 0 && this.page_context != "") {
        this.getVideoList();
      }
    },
    // 获取播放地址
    getPlayUrlFun() {
      this.failStatus = 0;
      this.playVideoUrl = "";
      uni.showLoading({
        title: "加载中",
      });
      getVideoPlay({
        id: this.id,
        play: "mp4",
        part: this.video_ids[this.playIndex],
      })
        .then((res) => {
          let url;
          if (res.type === "mp4") {
            url = res.url.single;
          } else if (res.type === "multi") {
            url = res.url.multi[0].url;
          } else {
            url = res.url.single;
          }
          this.playVideoUrl = url;
          uni.hideLoading();
        })
        .catch((res) => {
          uni.hideLoading();
          this.failStatus = 1;
        });
    },
    openVideo(index) {
      this.playIndex = index;
      //   if (this.video_ids.length > 0) {
      //     this.htmlUrl = this.video_ids[index].playUrl;
      //     this.title = this.video_ids[index].play_title;
      //   }
      this.getPlayUrlFun();
    },
    playErrorFun() {},
    endedFun() {
      if (this.playIndex >= this.video_ids.length - 1) {
        uni.showToast({
          title: "已经是最后一集了！",
          duration: 2000,
        });
      } else {
        this.playIndex++;
        this.openVideo(this.playIndex);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page_box {
  margin: 20rpx;
}

.movie-contain {
  display: flex;
  flex-direction: row;
}

.player {
  width: 50%;
  height: 200rpx;
}

.label_box {
  color: #fff;
  font-size: 12rpx;
}

.movie-title {
  font-size: 20rpx;
  font-weight: bold;
  color: #fff;
  margin: 5rpx 0rpx 6rpx;
}

.movie-year {
  padding-left: 5rpx;
}

.movie-inter {
  width: 50%;
  margin-left: 30rpx;
}

.movie-year,
.movie-info,
.movie-content {
  margin-bottom: 10rpx;
  font-size: 12rpx;
  color: #999;
  margin-top: 10rpx;
  height: 60rpx;
}

.btn-zone {
  display: flex;
  flex-direction: row;
}

.btn {
  width: 100rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
  font-size: 14rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  color: #fff;
  margin-right: 30rpx;
  border-radius: 6rpx;
}

.jj_title {
  font-size: 16rpx;
  color: #fff;
}

.btn_play {
  background: linear-gradient(
    to bottom right,
    rgba(#fc4507, 100%),
    rgba(#fd6909, 100%)
  );
}

.btn_swtich {
  background: linear-gradient(
    to bottom right,
    rgba(#118eff, 100%),
    rgba(#21ffd2, 100%)
  );
}

.btn-hover .btn {
  background: $uni-color-theme;
  transform: scale(1.2);
}

.list-zone {
  width: 95%;
  white-space: nowrap;
  margin-top: 30rpx;
  outline: none;
}

.list {
  width: 30rpx;
  height: 30rpx;
  font-size: 14rpx;
  font-weight: bold;
  text-align: center;
  line-height: 30rpx;
  border: 1rpx solid rgba($color: #fff, $alpha: 0.4);
  color: rgba($color: #fff, $alpha: 1);
  border-radius: 4rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
  background-color: rgba($color: #fff, $alpha: 0.1);
  display: inline-block;
  box-sizing: border-box;
}

.play_select {
  width: 30rpx;
  height: 30rpx;
  text-align: center;
  line-height: 30rpx;
  border: 1rpx solid $uni-color-theme;
  border-radius: 4rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
  color: rgba($color: #fff, $alpha: 1);
  background-color: rgba($color: #ec2224, $alpha: 0.1);
  display: inline-block;
  box-sizing: border-box;

  image {
    width: 10rpx;
    height: 10rpx;
  }
}

.list-hover {
  background-color: $uni-color-theme;
  border: 1rpx solid $uni-color-theme;
}

.list:last-child {
  margin-right: 50rpx;
}

.item {
  width: 82rpx;
  height: 30rpx;
  margin: 5rpx;
  text-align: center;
  background-color: #6b6b6b;
  border-radius: 5rpx;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 12rpx;
}

.item-hover {
  zoom: 0;
  background: #dd524d;
}
</style>
